<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .top {
            display: flex;
            flex: 2.5;
        }
        .top > div {
            flex: 1;
        }
        .bottom {
            flex: 2.5;
            display: flex;
        }
        .bottom>.chartBox{
            flex: 1;
        }
        .chartContent {
            height: 120px;
            overflow: auto;
        }
        /*表格*/
        #table tbody tr td{
            width: 20%;
            text-align: center;
        }


    </style>
</head>
<body id="03_03zichanfengxian" data-title="管理风险">
<div class="container">
    <h2 hidden>管理风险</h2>
    <header class="pageHeader">
        <div class="inputGroup">
            <label for="pingtai">平台：</label>
            <div class="mySelect" id="pingtai">
                <div class="myOption selected"><span class="text"></span><span class="icon"></span></div>
                <ul class="myOptionBox">
                    <li class="myOption selected">海尔小额贷款</li>
                    <li class="myOption">蚂蚁小额贷款</li>
                    <li class="myOption">汇金小额贷款</li>
                    <li class="myOption">西岸小额贷款</li>
                    <li class="myOption">中鸿小额贷款</li>
                </ul>
            </div>
        </div>
    </header>
    <div class="top">
        <div class="top-l">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>资产与负债</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness1"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-2">
            <div class="chartBox ec0302">
                <div class="chartTitle">
                    <h3>拨备覆盖</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-3">
            <div class="chartBox ec0302">
                <div class="chartTitle">
                    <h3>展期业务</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="top">
        <div class="top-4">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>投资业务</h3>
                </div>

                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness4"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="top-5">
            <div class="chartBox ec002">
                <div class="chartTitle">
                    <h3>贷款余额</h3>
                </div>
                <div class="chartContent">
                    <header>
                        <div class="inputGroup">
                            <label for="danbaofangsi">筛选条件：</label>
                            <div class="mySelect" id="danbaofangsi">
                                <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                </div>
                                <ul class="myOptionBox" style="height: 4.5rem;overflow: auto">
                                    <li class="myOption selected">担保方式</li>
                                    <li class="myOption">货款期限</li>
                                    <li class="myOption">企业规模</li>
                                    <li class="myOption">货款用途</li>
                                    <li class="myOption">客户进件年龄</li>
                                </ul>
                            </div>
                        </div>
                    </header>
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitivenes5"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-6">
            <div class="chartBox ec0302">
                <div class="chartTitle">
                    <h3>近12个月的放款额</h3>
                </div>
                <div class="chartContent">
                    <header>
                        <div class="inputGroup">
                            <label for="fangkuanedu">筛选条件：</label>
                            <div class="mySelect" id="fangkuanedu">
                                <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                </div>
                                <ul class="myOptionBox">
                                    <li class="myOption selected">抵质押</li>
                                    <li class="myOption">担保</li>

                                </ul>
                            </div>
                        </div>
                    </header>
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="chartBox ec002">
            <div class="chartTitle">
                <h3>资产风险列示</h3>
            </div>
                <div class="chartContent">
                    <table id="table1" align="center" width="100%">
                        <thead style="background: #00abde;font-size: 0.9rem">
                        <tr><td>报警时间</td><td>预警指标</td><td>预警原因</td><td>平台名称</td><td>业务详述</td></tr>
                        </thead>
                    </table>
                    <div style="overflow-x: auto; overflow-y: auto; height: 180px; width:100%;">
                        <table id="table" width="100%" height="180px">
                            <tbody>
                            <!--<tr><td>2018-3-1</td><td>资产风险</td><td>借款集中度</td><td>海尔小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-4-1</td><td>资产风险</td><td>借款集中度</td><td>蚂蚁小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-5-1</td><td>资产风险</td><td>借款集中度</td><td>汇金小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-5-3</td><td>资产风险</td><td>借款集中度</td><td>西岸小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-5-6</td><td>资产风险</td><td>借款集中度</td><td>中鸿小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-5-4</td><td>资产风险</td><td>借款集中度</td><td>海尔小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-1-1</td><td>资产风险</td><td>借款集中度</td><td>蚂蚁小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-2-1</td><td>资产风险</td><td>借款集中度</td><td>汇金小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-3-1</td><td>资产风险</td><td>借款集中度</td><td>西岸小额贷款</td><td>查看</td></tr>-->
                            <!--<tr><td>2018-4-1</td><td>资产风险</td><td>借款集中度</td><td>中鸿小额贷款</td><td>查看</td></tr>-->

                            </tbody>
                        </table>
                    </div>

                </div>
			</div>
    </div>
</div>
<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/pageCom.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];
    $(function () {
//资产与负债  模块一
        var myChart1 = echarts.init($("#ec0302_currentCompetitiveness1")[0]);
        myChart1.setOption(opt_line);
        myChart1.setOption(opt_bar_vertical);
        myChart1.setOption({
            grid: {
                left: '15%',
                right: '15%',
                bottom: '18%',
                top: '30%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    nameGap: 18 * bodyScale
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '万元',
                    interval:300000,
                    nameGap: 4 * bodyScale
                },
                {

                    name: '%',
                    interval:200000,
                    axisLine: { //坐标轴
                        lineStyle: {
                            color: "#369"
                        }
                    },
                    splitLine: { //分割线
                        lineStyle: {
                            color: "#369"
                        }
                    },
                    nameGap:4 * bodyScale
                },

            ],
            series: [
                {
                    name: '资产',
                    type: 'bar',
                    data: [552069.91, 592069.91, 622069.91, 652069.91, 712069.91, 732069.91],
                    barWidth: barWidth
                },
                {
                    name: '负债金额',
                    type: 'line',
                    data: [449874.28, 469874.28, 499874.28, 519874.28, 549874.28, 579874.28],
                    symbol: 'circle'

                },
                {
                    name: '对外担保额',
                    type: 'line',
                    data: [349874.28, 369874.28, 399874.28, 419874.28, 449874.28, 479874.28],
                    // color:'#ffd769',
                    symbol: 'circle'
                },
                {
                    name: '资本充足率',
                    type: 'line',
                    // data: [249874.28, 269874.28, 299874.28, 319874.28, 349874.28, 279874.28],
                    data: [30.28, 29.28, 28, 31, 34, 27],
                    symbol: 'circle',
                    yAxisIndex: 1
                }
            ]
        });
//拨备覆盖  模块二
        var myChart2 = echarts.init($("#ec0302_currentCompetitiveness2")[0]);
        myChart2.setOption(opt_bar_horizon);
        myChart2.setOption(opt_line);
        myChart2.setOption({
            grid: {
                left: '10%',
                right: '15%',
                bottom: '18%',
                top: '20%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '万元',
                    type: 'value',
                    interval: 200
                }
            ],
            series: [
                {
                    name: '风险货款额',
                    type: 'bar',
                    data: [600, 450, 390, 280, 470, 650],
                    barWidth: barWidth
                },
                {
                    name: '拨备金金额',
                    type: 'line',
                    data: [39, 30, 22, 17, 36, 49],
                    symbol: 'circle'
                }
            ]

        });
// 投资业务  模块三
        var myChart3 = echarts.init($("#ec0302_currentCompetitiveness3")[0]);
        myChart3.setOption(opt_bar_horizon);
        myChart3.setOption(opt_line);
        myChart3.setOption({
            grid: {
                left: '15%',
                right: '15%',
                bottom: '18%',
                top: '20%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6']
                }
            ],
            yAxis: [
                {
                    name: '万元',
                    type: 'value',
                    right: '15%'
                }
            ],
            series: [
                {
                    name: '本月货款发生额',
                    type: 'bar',
                    data: [6000, 4500, 3900, 2800, 4700, 6500],
                    barWidth: barWidth
                },
                {
                    name: '本期展期货款额度',
                    type: 'line',
                    data: [2800, 2100, 1700, 1200, 2200, 3000],
                    color: '#ffd769',
                    symbol: 'circle'
                }
            ]
        });
//投资业务  模块四;
        var myChart4 = echarts.init($("#ec0302_currentCompetitiveness4")[0]);
        myChart4.setOption(opt_bar_horizon);
        myChart4.setOption(opt_line);
        myChart4.setOption({
            grid: {
                left: '10%',
                right: '15%',
                bottom: '18%',
                top: '20%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '万元',
                    type: 'value',
                }
            ],
            series: [
                {
                    name: '资本额',
                    type: 'bar',
                    data: [600, 380, 390, 365, 470, 650],
                    barWidth: barWidth
                },
                {
                    name: '投资额',
                    type: 'line',
                    data: [29, 31, 29, 34, 33, 40],
                    symbol: 'circle'
                }
            ]
        });
//货款余额  模块五
        var myChart5 = echarts.init($("#ec0302_currentCompetitivenes5")[0]);
        myChart5.setOption(opt_pie);
        var option = {
            legend: {
                // orient: 'vertical',
                show: false
            },
            series: [
                {
                    name: '访问来源',
                    label: {
                        fontSize: 10 * bodyScale
                    },
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '54%'],
                    data: [
                        {value: 335, name: '抵质押'},
                        {value: 310, name: '担保'}
                    ]
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart5.setOption(option);
        }
// 12月的放款额  模块六
        var myChart6 = echarts.init($("#ec0302_currentCompetitiveness6")[0]);
        myChart6.setOption(opt_bar_horizon);
        myChart6.setOption(opt_line);
        myChart6.setOption({
            legend: {
                // orient: 'vertical',
                top:0,
                right:0
            },
            grid: {
                left: '18%',
                right: '15%',
                bottom: '22%',
                top: '20%'
            },
            xAxis: {
                name: '月份',
                type: 'category',
                data: [1,2,3,4,5,6]

            },
            yAxis: {
                name: '万元',
                type: 'value'
            },
            series: [
                {
                    name: '抵质押',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            color: '#00adef'
                        }
                    },
                    barWidth: barWidth,
                    data: [6000, 4500, 3900, 2800, 4700, 6500],
                },
                {
                    name: '担保',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            color: '#ffd769'
                        }
                    },
                    data: [2800, 2100, 1700, 1200, 2200, 3000],
                },

            ]
        });
//本页所有图表
        allCharts = [myChart1, myChart2, myChart3, myChart4, myChart5, myChart6];
    });
</script>
</body>
</html>
